<template>
  <div class="all">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-text="message"
    >
      <div class="header">
        <van-icon size="16px" name="arrow-left" @click="goback" />
        <div class="title">只做直租<span>直连房东无中介</span></div>
        <div style="flex: 1" />
        <van-icon size="15px" name="location-o" />
        <div style="font-size: 13px; margin-left: 2px" @click="tocitylist">
          {{ city ? city.slice(0, 3):"" }}
        </div>
      </div>
      <div class="show">
        <div class="menu">
          <div class="part">
            <div class="" @click="tomap">
              <img src="@/assets/rentindexicon01.png" />
              <span>地图找房</span>
            </div>
            <div class="" @click="jumptoshare">
              <img src="@/assets/rentindexicon02.png" />
              <span>合租</span>
            </div>
            <div class="" @click="jumptowhole">
              <img src="@/assets/rentindexicon03.png" />
              <span>整租</span>
            </div>
            <div class="" @click="jumptocommute">
              <img src="@/assets/rentindexicon04.png" />
              <span>通勤找房</span>
            </div>
          </div>
        </div>
        <div class="atwill">
          <div class="">
            <div class="">自定义快速房屋租赁服务</div>
            <div class="">* 房东可以把房屋租给自定义目标租客</div>
            <div class="">* 租客可以筛选自定义房源 / 合租室友</div>
          </div>
          <div class="imgbox" @click="jumptorelease">
            <img src="@/assets/nextpage.png" />
          </div>
        </div>
        <!-- <div class="tip">智能推荐</div> -->
        <div class="sorthouse" v-if="houselist.length != 0">
          <van-sticky :offset-top="46">
            <div ref="screen" class="navtab">
              <div @click="showscreen($event)">
                {{ value1 }}
                <van-icon size="13" name="arrow-down" />
                <div class="content" v-if="show">
                  <van-tree-select
                    :items="items"
                    :active-id.sync="activeId"
                    :main-active-index.sync="activeIndex"
                    @click-item="areachoose"
                  />
                  <div class="btnarea">
                    <van-button @click="reset1">重置</van-button>
                    <van-button @click="jumptoscreen">确定</van-button>
                  </div>
                </div>
              </div>
              <div @click="showscreen($event)">
                {{ value2 + value5 }}<van-icon size="13" name="arrow-down" />
                <div class="content" v-if="show">
                  <div class="way">
                    <div>
                      <span ref="share" @click="labchoose1">合租</span>
                      <span ref="whole" @click="labchoose2">整租</span>
                    </div>
                    <div class="tipwords">户型</div>
                    <div>
                      <span
                        v-for="item in roomlist"
                        :key="item"
                        ref="roomlist"
                        @click="labchoose3($event)"
                        >{{ item }}</span
                      >
                    </div>
                  </div>
                  <div class="btnarea">
                    <van-button @click="reset2">重置</van-button>
                    <van-button @click="jumptoscreen">确定</van-button>
                  </div>
                </div>
              </div>
              <div @click="showscreen($event)">
                {{ value3 }}<van-icon size="13" name="arrow-down" />
                <div class="content" v-if="show">
                  <div class="moneybox">
                    <div
                      v-for="item in moneylist"
                      :key="item"
                      ref="moneylist"
                      @click="moenychoose($event)"
                    >
                      {{ item }}
                    </div>
                  </div>
                  <div class="btnarea">
                    <van-button @click="reset3">重置</van-button>
                    <van-button @click="jumptoscreen">确定</van-button>
                  </div>
                </div>
              </div>
              <div @click="showscreen($event)">
                {{ value4 }}<van-icon size="13" name="arrow-down" />
                <div class="content" v-if="show">
                  <div class="sortbox">
                    <div
                      v-for="item in sortlist"
                      :key="item"
                      ref="sortlist"
                      @click="sortchoose($event)"
                    >
                      {{ item }}
                    </div>
                  </div>
                  <div class="btnarea">
                    <van-button @click="reset4">重置</van-button>
                    <van-button @click="jumptoscreen">确定</van-button>
                  </div>
                </div>
              </div>
            </div>
          </van-sticky>
        </div>
        <div v-show="houselist.length != 0" class="tuijian">
          <div
            v-for="item in houselist"
            :key="item.index"
            class="house"
            @click="jumptodetail(item.roomId, item)"
          >
            <van-image
              width="121px"
              height="112px"
              lazy-load
              :src="item.image"
              fit="cover"
              radius="5px"
            />
            <div class="intrduce">
              <span class="title1">{{ item.subdistrict }}</span>
              <span class="title2"
                ><span>{{ item.rentalWay }}</span
                >|<span>{{ item.houseType }}</span
                >|<span>{{ item.roomAcre }}</span
                >|<span>{{ item.floor }}</span></span
              >
              <span class="title2">{{ item.address }}</span>
              <div class="tips">
                <span>{{ item.rentalWay }}</span>
                <span v-if="item.paymentMethod">{{ item.paymentMethod }}</span>
                <span>{{ item.houseType }}</span>
              </div>
              <span class="title3">{{ item.price }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="newup">
        <div class="tip">最新上架</div>
      </div> -->
        <div v-show="houselist.length == 0 && !zhiloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>房源上新中...</div>
        </div>
        <div v-show="zhiloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>加载中...</div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getHouselist } from "@/apis/house.js";
import local from "../../utils/local";
import {
  getGeolocation,
  getChooseCity,
  getHouseList,
  setHouseList,
} from "@/utils/auth";
import { getAreaList } from "@/apis/city";
import { _local } from "@/utils/storage";
import { addLog } from "@/apis/user";

export default {
  data() {
    return {
      message: "",
      isLoading: true,
      value1: "位置",
      value2: "合/整租",
      value3: "租金",
      value4: "排序",
      value5: "",
      zhiloading: true,
      city: "",
      cityCode: "",
      count: 5,
      page: 1,
      show: false,
      houselist: [],
      searchdata: { currentPage: 1, perPage: 10 },
      activeId: 0,
      activeIndex: 0,
      items: [
        {
          text: "区域",
          children: [],
        },
      ],
      list: ["合租", "整租"],
      roomlist: ["不限", "1居室", "2居室", "3居室", "4居室", "5居+"],
      moneylist: [
        "不限",
        "1000以下",
        "1000~2000",
        "2000~3000",
        "3000~4000",
        "4000~5000",
        "5000以上",
      ],
      sortlist: [
        "默认排序",
        "价格由高到低",
        "价格由低到高",
        "面积从小到大",
        "面积从大到小",
      ],
      loading: false,
    };
  },
  created() {
    const chooseCity = getChooseCity();
    const geolocation = getGeolocation();
    if (chooseCity) {
      this.city = chooseCity.city;
      this.cityCode = chooseCity.cityCode;
    } else {
      this.city = geolocation ? geolocation.city : "";
      this.cityCode = geolocation ? geolocation.cityCode : "";
    }

    this.getHouse();
    this.getdis();
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    onRefresh() {
      getHouselist({
        citycode: this.cityCode,
        currentPage: 1,
        perPage: 10,
      }).then((response) => {
        const code = response.code;
        const result = response.result;
        if (code === 201 || code === 200) {
          this.zhiloading = false;
          this.isLoading = false;
          this.message = "刷新成功";
          this.$toast("刷新成功");
          if (result.list) {
            this.houselist = result.list;
          }
          if (this.houselist.length === 10) {
            this.loading = true;
          }
        } else {
          this.isLoading = false;
          this.message = "刷新失败";
          this.$toast("刷新失败");
        }
      });
    },
    go() {
      this.$router.push({
        path: "/rentscreen",
        query: { cityCode: this.cityCode },
      });
    },
    goback() {
      this.$router.push({ path: "/home/index" });
    },
    async getdis() {
      await getAreaList({
        citycode: _local.get("cityCode"),
      }).then((res) => {
        console.log("getAreaList", res);
        if (
          this.city === "上海市" ||
          this.city === "北京市" ||
          this.city === "天津市" ||
          this.city === "重庆市"
        ) {
          this.arealist = res.result.list.slice(1);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        } else {
          this.arealist = res.result.list.slice(2);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        }
      });
    },
    tomap() {
      // this.$router.push({ path: '/map' })
      this.$toast("功能更新中，敬请期待");
    },
    tocitylist() {
      this.$router.push({ path: "/city", query: { city: this.city } });
    },
    jumptorelease() {
      this.$router.push({ path: "/release" });
    },
    jumptodetail(e, item) {
      const list = getHouseList();
      for (let i = 0; i < list.length; i++) {
        if (list[i].roomId === item.roomId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseList(list);
      this.$router.push({ path: "/housedetail", query: { roomId: e } });
    },
    jumptoshare() {
      this.$router.push({ path: "/sharehouse" });
    },
    jumptowhole() {
      this.$router.push({ path: "/wholehouse" });
    },
    jumptocommute() {
      this.$router.push({ path: "/commute" });
    },
    jumptoscreen() {
      local.set("searchdata", JSON.stringify(this.searchdata));
      addLog({
        adcode: _local.get("adCode"),
        code: "click",
        page_name: "租房筛选一级页面",
        system: _local.get("device"),
        uid: _local.get("ryId"),
        describe: `筛选条件:${this.value1},${this.value2 + this.value5},${
          this.value3
        },${this.value4},城市:${_local.get("city")}`,
      }).then((res) => {});
      this.$router.push({
        path: "/rentscreen",
        query: {
          cityCode: this.cityCode,
          value1: this.value1,
          value2: this.value2,
          value3: this.value3,
          value4: this.value4,
          value5: this.value5,
        },
      });
    },
    showscreen(e) {
      this.show = true;
      if (e.currentTarget === e.target) {
        if (e.currentTarget.classList[0] === "active") {
          e.currentTarget.classList.remove("active");
        } else {
          this.$refs.screen.children.forEach((v) => {
            v.classList.remove("active");
          });
          e.currentTarget.classList.add("active");
        }
      }
    },
    areachoose(data) {
      this.searchdata.adcode = data.id;
      this.value1 = data.text.slice(0, 2) + "...";
    },
    labchoose1(event) {
      this.value2 = event.currentTarget.innerText.slice(0, 1);
      if (event.currentTarget.classList[0] === "chooseactive") {
        this.searchdata.rentalWay = "0";
        event.currentTarget.classList.remove("chooseactive");
      } else {
        this.searchdata.rentalWay = "1";
        event.currentTarget.classList.add("chooseactive");
        this.$refs.whole.classList.remove("chooseactive");
      }
    },
    labchoose2(event) {
      this.value2 = event.currentTarget.innerText.slice(0, 1);
      if (event.currentTarget.classList[0] === "chooseactive") {
        event.currentTarget.classList.remove("chooseactive");
        this.searchdata.rentalWay = "0";
      } else {
        this.searchdata.rentalWay = "2";
        event.currentTarget.classList.add("chooseactive");
        this.$refs.share.classList.remove("chooseactive");
      }
    },
    labchoose3(event) {
      this.value5 = event.currentTarget.innerText.slice(0, 2) + "...";
      if (event.currentTarget.classList[0] === "chooseactive") {
        event.currentTarget.classList.remove("chooseactive");
        this.searchdata.houseType = "0";
      } else {
        this.$refs.roomlist.forEach((e) => {
          e.classList.remove("chooseactive");
        });
        if (event.target.innerText === "1居室") {
          this.searchdata.houseType = "1";
        } else if (event.target.innerText === "2居室") {
          this.searchdata.houseType = "2";
        } else if (event.target.innerText === "3居室") {
          this.searchdata.houseType = "3";
        } else if (event.target.innerText === "4居室") {
          this.searchdata.houseType = "4";
        } else if (event.target.innerText === "5居+") {
          this.searchdata.houseType = "5";
        }
        event.currentTarget.classList.add("chooseactive");
      }
    },
    moenychoose(e) {
      this.value3 = e.currentTarget.innerText.slice(0, 2) + "...";
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
        this.searchdata.priceMin = "1";
        this.searchdata.priceMax = "10000000";
      } else {
        this.$refs.moneylist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (e.target.innerText === "1000以下") {
          this.searchdata.priceMin = "1";
          this.searchdata.priceMax = "1000";
        } else if (e.target.innerText === "1000~2000") {
          this.searchdata.priceMin = "1000";
          this.searchdata.priceMax = "2000";
        } else if (e.target.innerText === "2000~3000") {
          this.searchdata.priceMin = "2000";
          this.searchdata.priceMax = "3000";
        } else if (e.target.innerText === "3000~4000") {
          this.searchdata.priceMin = "3000";
          this.searchdata.priceMax = "4000";
        } else if (e.target.innerText === "4000~5000") {
          this.searchdata.priceMin = "4000";
          this.searchdata.priceMax = "5000";
        } else if (e.target.innerText === "5000以上") {
          this.searchdata.priceMin = "5000";
          this.searchdata.priceMax = "10000000";
        } else if (e.target.innerText === "不限") {
          this.searchdata.priceMin = "1";
          this.searchdata.priceMax = "10000000";
        }
        e.currentTarget.classList.add("mboxactive");
      }
    },
    sortchoose(e) {
      this.value4 = e.currentTarget.innerText.slice(0, 2) + "...";
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
      } else {
        this.$refs.sortlist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        e.currentTarget.classList.add("mboxactive");
        if (e.target.innerText === "价格由高到低") {
          this.sendval.price = "1";
          this.sendval.acre = "0";
          this.sendval.order = "1";
        } else if (e.target.innerText === "价格由低到高") {
          this.sendval.price = "1";
          this.sendval.acre = "0";
          this.sendval.order = "2";
        } else if (e.target.innerText === "面积从小到大") {
          this.sendval.price = "0";
          this.sendval.acre = "1";
          this.sendval.order = "2";
        } else if (e.target.innerText === "面积从大到小") {
          this.sendval.price = "0";
          this.sendval.acre = "1";
          this.sendval.order = "1";
        } else if (e.target.innerText === "默认排序") {
          this.sendval.price = "0";
          this.sendval.acre = "0";
          this.sendval.order = "0";
        }
      }
    },
    getHouse() {
      getHouselist({
        citycode: this.cityCode,
        currentPage: 1,
        perPage: 10,
      }).then((response) => {
        const code = response.code;
        const result = response.result;
        if (code === 201 || code === 200) {
          this.zhiloading = false;
          if (result.list) {
            this.houselist = result.list;
          }
          if (this.houselist.length === 10) {
            this.loading = true;
          }
        }
      });
    },
    reset1() {
      this.value1 = "位置";
      this.activeId = 0;
      this.sendval.adcode = "";
    },
    reset2() {
      this.value2 = "合/整租";
      this.value5 = "";
      this.sendval.rentalWay = "0";
      this.sendval.houseType = "0";
      this.$refs.whole.classList.remove("chooseactive");
      this.$refs.share.classList.remove("chooseactive");
      this.$refs.roomlist.forEach((e) => {
        e.classList.remove("chooseactive");
      });
    },
    reset3() {
      this.value3 = "租金";
      this.sendval.priceMin = "1";
      this.sendval.priceMax = "10000000";
      this.$refs.moneylist.forEach((e) => {
        e.classList.remove("mboxactive");
      });
    },
    reset4() {
      this.value4 = "排序";
      this.sendval.price = "0";
      this.sendval.acre = "0";
      this.sendval.order = "0";
      this.$refs.sortlist.forEach((e) => {
        e.classList.remove("mboxactive");
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.searchdata.currentPage++;
        getHouselist({
          citycode: this.cityCode,
          currentPage: this.searchdata.currentPage,
          perPage: this.searchdata.perPage,
        }).then((response) => {
          const code = response.code;
          const result = response.result;
          if (code === 201 || code === 200) {
            if (result.list) {
              if (response.result.list.length !== 10) {
                this.loading = false;
              }
              this.houselist = [...this.houselist, ...response.result.list];
            }
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
@keyframes change {
  0% {
    width: 50px;
    height: 50px;
  }
  50% {
    width: 20px;
    height: 20px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}
.all {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    span {
      line-height: 25px;
      height: 25px;
      display: inline-block;
      font-size: 11px;
      color: #ccc;
      margin-left: 5px;
    }
  }
}
.show {
  padding-top: 40px;
  flex: 1;
  background-color: #f2f4f6;
  .menu {
    padding: 20px 15px 0;
    .part {
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 15px 0;
      div {
        width: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        color: #333;
        img {
          margin-bottom: 5px;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .atwill {
    margin: 20px 15px;
    height: 95px;
    background-image: linear-gradient(to right, #45b7cb, #aadee7);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      height: 100%;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        &:first-child {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        &:nth-child(2),
        &:last-child {
          font-size: 13px;
        }
      }
    }
    .imgbox {
      width: 50px;
      height: 50px;
      margin-right: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        animation-name: change;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        width: 100%;
        height: 100%;
      }
    }
  }
  .tip {
    font-weight: bold;
    background-color: #fff;
    margin: 0 15px;
    padding: 15px 10px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #f1f1f1;
  }
  .house {
    background-color: #fff;
    margin: 0 15px;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 121px;
      height: 112px;
      min-width: 121px;
      max-width: 121px;
      border-radius: 5px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      width: 190px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 3px;
          border: 0;
          background-color: #ebfafd;
          color: #5eb9d0;
          border-radius: 5px;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          font-size: 12px;
          margin-left: 3px;
        }
      }
    }
  }
}
.sorthouse {
  margin: 0 15px;
  .navtab {
    background-color: #fff;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    font-size: 14px;
    .content {
      background-color: #fff;
      position: absolute;
      width: 100%;
      top: 40px;
      left: 0;
      z-index: 10000;
      color: #000;
      display: none;
      .way {
        margin: 15px 20px 10px;
        font-size: 14px;
        span {
          display: inline-block;
          text-align: center;
          width: 70px;
          line-height: 35px;
          height: 35px;
          background-color: #fff;
          color: #46b8cb;
          border: 1px solid #46b8cb;
          border-radius: 5px;
          margin-right: 10px;
          margin-top: 5px;
        }
        .chooseactive {
          background-color: #46b8cb;
          color: #fff;
        }
        .tipwords {
          font-size: 13px;
          font-weight: bold;
          margin: 10px 0;
        }
      }
      .btnarea {
        .van-button {
          font-size: 16px;
          &:first-child {
            width: 35%;
            background-color: #fff;
            border: none;
          }
          &:last-child {
            width: 65%;
            background-color: #46b8cb;
            color: #fff;
          }
        }
      }
      .moneybox,
      .sortbox {
        text-align: center;
        font-size: 14px;
        div {
          height: 40px;
          line-height: 40px;
        }
        .mboxactive {
          color: #46b8cb;
        }
      }
    }
    .active {
      color: #d43b33;
      .content {
        display: block;
      }
    }
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0 15px;
  padding-bottom: 30px;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>
